"use strict";
import React from "react";
import ReactDOM from "react-dom";
import { History, Lifecycle } from "react-router";
import Reflux from "reflux";
import SwipeableViews from "react-swipeable-views"

import $ from "jquery";
import _ from "lodash";

import { CONFIG } from "../common/config.js";
import { GOTOMixin } from "./mixins.jsx";
import { UserStore } from "../store/userstore.js";
import { UserActions } from "../action/useraction.js";
import { getISODate } from "../common/datehelper.js";
import { IndexStore, IndexActions } from "../store/indexstore.js";
import { getLastTradingDay } from "../store/common.js";
import { numFixed, unitFormat } from "../common/numberformat.js";
import lscache from "lscache";
import IScroll from "./iscroll.jsx";


var PageIndex = React.createClass({
	mixins: [History, GOTOMixin, Reflux.connect(UserStore, "user"), Reflux.connect(IndexStore, 'data') ], // Reflux.connect(FundlistStore, "fundlist"),],
	parentDOM: null,
	getInitialState: function(){
		return {
			index: 0,
			type: 0
		};
	},
	componentDidMount: function(){
		var parent = ReactDOM.findDOMNode(this);
		var parent = $(parent).parent();
		this.parentDOM = parent;
		var className = parent.attr('class');
		if(className != 'page_index'){
			parent.attr('class', 'page_index');
		}

		// 调用数据
		var callback = function(lastTradingDay){
			var lastTradingDay = getISODate(lastTradingDay).replace(/\-/g, '');
			IndexActions.fetchData({startdate:lastTradingDay, enddate: lastTradingDay});	
		}
		var today = new Date();
    	today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
    	// today = new Date(2014, 9, 1);
		getLastTradingDay(today, callback);
	},
	componentWillUnmount: function(){
		console.log('unmount')
		this.parentDOM.removeClass('page_index');
	},
	handleLogout: function(){
		UserActions.logout();
	},
	onChangeIndex(index) {
	    this.setState({
	      index: index,
	      type: 1
	    });
	},
	render: function(){
		var ds_trade_t0 = _.get(this.state.data, 'ds_trade_t0', {});
		var ds_trade_t1_value = _.get(this.state.data, 'ds_trade_t1_hb', {value: [{}]}).value[0];
		var ds_trade_t1_cvalue = _.get(this.state.data, 'ds_trade_t1_hb', {comparevalue: [{}]}).comparevalue[0];
		var ds_trade_t1_hb = _.get(this.state.data, 'ds_trade_t1_hb', {chaindata: [{}]}).chaindata[0];
		var ds_customer_t1_value = _.get(this.state.data, 'ds_customer_t1_hb', {value: [{}]}).value[0];
		var ds_customer_t1_cvalue = _.get(this.state.data, 'ds_customer_t1_hb', {comparevalue: [{}]}).comparevalue[0];
		var ds_customer_t1_hb = _.get(this.state.data, 'ds_customer_t1_hb', {chaindata: [{}]}).chaindata[0];
		var showDiv = lscache.get('showDiv') ? lscache.get('showDiv') : 0;
		if (this.state.type == 1) {
			showDiv = this.state.index;
		}

		var volumeChg = numFixed(unitFormat(
			_.get(ds_trade_t1_value, 'trade_volume', '') - _.get(ds_trade_t1_cvalue, 'trade_volume', '') 
			, '亿')[0], 0);
		volumeChg = volumeChg ==  0? '': volumeChg;
		var volumeChgPer = _.get(ds_trade_t1_hb, 'trade_volume', '');
		volumeChgPer = (volumeChgPer != null? numFixed(volumeChgPer * 100, 2) : volumeChgPer);

		var customerChg = numFixed(unitFormat(
			_.get(ds_customer_t1_value, 'newacct_volumes', '') - _.get(ds_customer_t1_cvalue, 'newacct_volumes', '') 
			, '')[0], 0);
		customerChg = customerChg ==  0? '': customerChg;
		var customerChgPer = _.get(ds_customer_t1_hb, 'newacct_volumes', '');
		customerChgPer = (customerChgPer != null ? numFixed(customerChgPer * 100, 2) : customerChgPer);

		var portion_volume = numFixed(_.get(ds_trade_t1_value, 'portion_volume', '')*50, 2);

		var enddate = null;
		if(this.state.data && this.state.data.params){
			enddate = this.state.data.params.enddate;
		}

		var userTitle = null;
		if(this.state.user && this.state.user.title){
			userTitle = <div className="post">{this.state.user.title}</div>;
		}
		var userName = null;
		if(this.state.user && this.state.user.name){
			userName = this.state.user.name;
		}
		var displayTable = ['XZYXH', 'KHS', 'SCFE', 'LRZJC', 'AUM'];


		return (
	<div key="page-index" id="container" className="container">
		<div id="page_main">
			<div className="first_main">
				<div className="first">
					<i style={{display: 'none'}} className="icon-reorder"></i>
					<div className="title">舵手系统</div>
					<i id="icon-help" onTouchTap={this.gotoHelp} className="icon-info"></i>
				</div>
				<div className="second">
					<table>
						<tbody>
						<tr>
							<td>
								<div className="head"></div>
							</td>
							<td>
								<div className="info">{userName} <small>[您好]</small>
									<button id="btn-logout" onClick={this.handleLogout} className="btn btn-primary btn-xs">登出</button>
								</div>
								{userTitle}
								<div className="time">登陆时间：{(this.state.user==null)?'':this.state.user.timestamp}</div>		
							</td>
						</tr>
					</tbody></table>
				</div>
				<div className="third">
					<table>
						<tbody><tr>
							<td>
								<div className="title">成交量</div>
								<div className="row_t">
									<span className="value">{numFixed(unitFormat(_.get(ds_trade_t1_value, 'trade_volume', ''), '亿')[0], 0)}</span><small>亿元</small>
								</div>
								<div className="change_main">
									<span className="change">{volumeChg}亿元</span>
									<span className="chg">{volumeChgPer}%</span>
								</div>
							</td>
							<td>
								<div className="title">开户数</div>
								<div className="row_t">
									<span className="value">{numFixed(unitFormat(_.get(ds_customer_t1_value, 'newacct_volumes', ''), '')[0], 0)}</span><small>户</small>
								</div>
								<div className="change_main">
									<span className="change">{customerChg}户</span>
									<span className="chg">{customerChgPer}%</span>	
								</div>
							</td>
						</tr>
					</tbody></table>
				</div>
				<div className="fourth">
					<i className="icon-time"></i><span className="time">统计日期：{_.get(ds_trade_t1_value, 'ex_date', null)}</span>
				</div>
			</div>
			<div id="bannerpagination" className="pagination swiper-pagination-clickable">
				<span className={"swiper-pagination-bullet" + (showDiv == 0 ? ' swiper-pagination-bullet-active' : '')}></span>
				<span className={"swiper-pagination-bullet" + (showDiv == 1 ? ' swiper-pagination-bullet-active' : '')}></span>
			</div>
			<SwipeableViews
                continuous={false} index={showDiv} style={{minHeight: '330px'}} onChangeIndex={this.onChangeIndex}>
                <IScroll noPullDownBar={true} height={screen.height - 255}>
                <div id='index_table_show'>
               		<div className="index-block-wraper"> 
	                	<div className="kh index-block client-data" onTouchTap={this.gotoTradingDetail} data-div='0' data-detail='KHS'>
	                		<div className="day">T+1</div>
	                		<div className='icon' > </div>
	            			<div className='value'>{numFixed(unitFormat(_.get(ds_customer_t1_value, 'newacct_volumes', ''), '')[0], 0)}<small>户</small></div>
	            			<div className='title'>开户数</div>
	                	</div>
                	</div>
               		<div className="index-block-wraper"> 
	                	<div className="xzyxh index-block client-data" onTouchTap={this.gotoTradingDetail} data-div='0' data-detail='XZYXH'>
	                		<div className="day">T+1</div>
	                		<div className='icon' > </div>
	            			<div className='value'>{numFixed(unitFormat(_.get(ds_customer_t1_value, 'newcust_volumes', ''), '')[0], 0)}<small>户</small></div>
	            			<div className='title'>新增有效户</div>
	                	</div>
                	</div>
               		<div className="index-block-wraper"> 
	               		<div className="scfe index-block" onTouchTap={this.gotoTradingDetail} data-div='0' data-detail='SCFE'>
	               			<div className="day">T+1</div>
	               			<div className="icon"></div>
	           				<div className='value'>{portion_volume}<small>%</small></div>
	           				<div className='title'>市场份额</div>
	               		</div>
                	</div>
               		<div className="index-block-wraper"> 
	                	<div className="lrzjc index-block" onTouchTap={this.gotoTradingDetail} data-div='0' data-detail='LRZJC'>
	                		<div className="day">T+1</div>
	               			<div className="icon"></div>
	            			<div className='value'>{numFixed(unitFormat(_.get(ds_trade_t1_value, 'two_financial_fund', ''), '亿')[0], 0)}<small>亿元</small></div>
	            			<div className='title'>两融资金池</div>
	                	</div>
                	</div>
               		<div className="index-block-wraper"> 
	                	<div className="aum index-block" onTouchTap={this.gotoTradingDetail} data-div='0' data-detail='AUM'>
	                 		<div className="day">T+1</div>
	               			<div className="icon"></div>
	            			<div className='value'>{numFixed(unitFormat(_.get(ds_trade_t1_value, 'aum_total_amt', ''), '亿')[0], 0)}<small>亿元</small></div>
	            			<div className='title'>AUM</div>
	                	</div>
                	</div>
                </div>
				</IScroll>
               	<div>
               		<div className="type_list jysj_list"> 
               			<div className="icon" onTouchTap={this.gotoTrading} data-div='1'>交易数据</div>
               		</div>
               		<div className="type_list khsj_list">
						<div className="icon" onTouchTap={this.gotoClient} data-div='1'>客户数据</div>
					</div>
				</div>
            </SwipeableViews>
		</div>
	</div>
		);
	}
})


export { PageIndex };